<template>
  <view class="paypassword">
    <u-form :model="form" ref="uForm" :rules="rules">
      <u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="交易密码:" prop="pay">
        <u-input placeholder="请输入6位数的密码" :placeholderStyle="placeholderStyle" maxlength="6" v-model="form.pay"
          type="password"></u-input>
      </u-form-item>
      <u-form-item :labelStyle="labelStyle" label-position="left" label=" 确认密码:" prop="paypass" label-width="150">
        <u-input placeholder="请再次输入密码" :placeholderStyle="placeholderStyle" maxlength="6" v-model="form.paypass"
          type="password"></u-input>
      </u-form-item>
    </u-form>
    <view class="foot_box u-flex u-row-between u-col-center">
      <button class="u-reset-button post-btn" @click="submit" form-type="submit">提交</button>
      <u-toast ref="uToast" />
      <!-- <button class="u-reset-button contact-btn" @tap="onService">联系客服</button> -->
    </view>
  </view>
</template>

<script>
  import {
    mapMutations,
    mapActions,
    mapState
  } from 'vuex';
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form.pay) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        form: {
          pay: '',
          paypass: ''
        },
        labelStyle: {
          'font-size': '30rpx',
          'font-weight': '600',
          color: '#333'
        },
        placeholderStyle: 'font-size: 30rpx; font-weight: 500;color:#C2C7CF;',
        rules: {
          pay: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 6,
              message: '长度在 6 个字符',
              trigger: 'blur'
            },
            {
              trigger: 'blur'
            }
          ],
          paypass: [{
              required: true,
              message: '请确认密码',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 6,
              message: '长度在 6 个字符',
              trigger: 'blur'
            },
            {
              validator: validatePass,
              trigger: 'blur',
              required: true
            }
          ],
        }
      }
    },
    computed: {
      ...mapState({
        userInfo: ({
          user
        }) => user.userInfo,
        authType: ({
          user
        }) => user.authType
      })
    },
    methods: {
      submit() {
        let that = this;
        that.$refs.uForm.validate(valid => {
          if (valid) {
            that.$http('user.dealpwd', {
              id: that.userInfo.id,
              pay_password: that.form.pay,
              password_again: that.form.paypass
            }).then(res => {
              if (res.code === 1) {
                uni.showToast({
                  title: '设置成功',
                  icon: 'none',
                  success() {
                    setTimeout(function(){
                      that.$Router.back();
                    },700)
                  }
                })
              } else {
                uni.showToast({
                  title: res.msg,
                  icon: 'none'
                })
              }
            })
          }
        });
      }
    },
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    },

  }
</script>

<style lang="scss">
  .paypassword {
    width: 96%;
    margin: 20rpx auto;
    padding: 0 30rpx;
    border-radius: 10rpx;
    background-color: #fff;
    height: 90%
  }

  // 底部按钮
  .foot_box {
    height: 100rpx;
    width: 100%;
    margin-top: 70%;

    .contact-btn {
      width: 340rpx;
      line-height: 74rpx;
      background: linear-gradient(90deg, rgba(103, 104, 105, 1), rgba(82, 82, 82, 1));
      box-shadow: 0px 2rpx 5rpx 0px rgba(102, 103, 104, 0.46);
      border-radius: 35rpx;
      font-size: 28rpx;

      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }

    .post-btn {
      width: 340rpx;
      margin: 0 auto;
      line-height: 74rpx;
      background: linear-gradient(90deg, #FA6E3F, #FEAB55);
      box-shadow: 0px 7rpx 6rpx 0rpx rgba(229, 138, 0, 0.22);
      border-radius: 37rpx;
      font-size: 28rpx;

      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }
  }
</style>
